<template>
  <!-- 工单表表单弹窗 -->
  <el-dialog
    v-model="visibleDialog"
    :title="props.title"
    width="80%"
    draggable
    @close="closeDialog"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="年月" prop="yearMonthPlan">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.yearMonthPlan"
              placeholder="请输入年月"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人数" prop="peopleNum">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.peopleNum"
              placeholder="请输入人数"
              clearable
            />
            <span v-else>{{ formData.peopleNum }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="废品率" prop="rejectRate">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.rejectRate"
              placeholder="请输入废品率"
              clearable
              disabled
            >
              <template #append>%</template>
            </el-input>
            <span v-else>{{ formData.rejectRate }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
    <core-reckon-descriptions
      :data="dataAll"
      :column="10"
      :isReadonly="props.isReadonly"
      :yearMonthPlan="formData.yearMonthPlan"
    />
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { validateNumber } from "@/utils/commonHooks"; // 引入

defineOptions({
  name: "CORERECKONPARAMETERSETTING",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
const intervalDayList = ref([]);
const shiftSetIdData = ref([]);
const dataAll = ref();
watch(
  () => props.visible,
  (newVal: boolean) => {
    dataAll.value = props.data;
    Object.assign(formData, props.data);
    console.log("props.data", formData);
    if (formData.rejectRate == "") {
      formData.rejectRate = "2";
    }
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  intervalDayList.value = [];
  shiftSetIdData.value = [];
  dataAll.value.intervalDayList = [];
  dataAll.value.shiftSetIdData = [];
  dataAll.value.shiftSetList = [];
  formRef.value.clearValidate();
}

const rules = reactive({
  yearMonthPlan: [{ required: true, message: "请输入年月", trigger: "blur" }],
  peopleNum: [
    { required: true, message: "请输入人数", trigger: "blur" },
    { validator: validateNumber, trigger: "blur" },
  ],
  rejectRate: [
    { required: true, message: "请输入废品率", trigger: "blur" },
    { validator: validateNumber, trigger: "blur" },
  ],
});
const formRef = ref(ElForm);
let formData = reactive({
  id: "",
  organizationId: "",
  organizationCode: "",
  organizationName: "",
  plantId: "",
  plantCode: "",
  plantName: "",
  yearMonthPlan: "",
  planYear: "",
  planMonth: "",
  peopleNum: "",
  rejectRate: "",
  version: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
  details: [],
  shiftSetIdData: [],
  intervalDayList: [],
  shiftSetList: [],
});

const loading = ref(false);
/** 参数保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      formData.details = formData.shiftSetIdData;
      await request({
        url: "/mes/mescoremonthreckon/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}
</script>
